<template>
  <div class="actor-item">
    <el-avatar shape="square" fit="cover" :src="pavatar" :size="70"></el-avatar>
    <div>{{ pname }}</div>
    <i class="el-icon-error" @click="deleteActor"></i>
  </div>
</template>
<script>
export default {
  props: ["pid", "pname", "pavatar"],
  data() {
    return {}
  },
  methods: {
    deleteActor() {
      // 通知父组件点击删除
      this.$emit("delete")
    },
  },
}
</script>
<style scoped>
.el-avatar >>> img {
  width: 100%;
}
.actor-item {
  position: relative;
  display: inline-block;
  margin: 20px 20px 0 0;
  text-align: center;
}
.actor-item:hover i {
  display: block;
}
.actor-item i {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.2em;
  display: none;
}
.actor-item div {
  font-style: 0.9em;
}
</style>
